import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {
    PageContainer,
    ProTable,
} from '@ant-design/pro-components';
import React, {useRef, useState} from 'react';
import type {HostComputerListItem} from './data';
import {hostComputerList} from './service';
import {dataCenterSelectList} from "@/pages/power/data-center-list/service";
import {skuSelectList} from "@/pages/power/sku/sku-list/service";
import {useAccess, Access} from 'umi';

const HostComputerList: React.FC = () => {
    /** 分布更新窗口的弹窗 */
    const actionRef = useRef<ActionType>();
    const columns: ProColumns<HostComputerListItem>[] = [
        {
            title: '资源池',
            dataIndex: "dataCenterId",
            valueType: 'select',
            search: true,
            hidden: true, // 关闭自动换行
            request: async () => {
                const result = await dataCenterSelectList({});
                return (
                    result.data?.map((item) => ({
                        label: item.name,
                        value: item.dataCenterId,
                    })) || []
                );
            },
        },
        {
            title: '所属资源池',
            dataIndex: ["dataCenterName"],
            valueType: 'text',
            search: false,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '规格',
            dataIndex: "skuId",
            valueType: 'select',
            search: true,
            hidden: true, // 关闭自动换行
            request: async () => {
                const result = await skuSelectList({});
                return (
                    result.data?.map((item) => ({
                        label: item.skuName,
                        value: item.skuId,
                    })) || []
                );
            },
        },
        {
            title: '规格',
            dataIndex: ["skuName"],
            search: false,
            valueType: 'text',
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '主机名称',
            dataIndex: 'name',
            search: true,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '主机IP',
            dataIndex: 'hostIp',
            search: true,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '系统',
            dataIndex: 'systemOS',
            search: false,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '付费方式',
            dataIndex: 'billingCycle',
            valueType: 'text',
            search: false,
            render: (value, record, index) => {
                if (record.billingCycle == 'hour') {
                    return <span>￥{record.unitPrice}/小时</span>;
                } else if (record.billingCycle == 'day') {
                    return <span>￥{record.unitPrice}/天</span>;
                } else if (record.billingCycle == 'month') {
                    return <span>￥{record.unitPrice}/月</span>;
                }
                return record.billingCycle
            },
        },
        {
            title: '开通时间',
            dataIndex: 'createdAt',
            valueType: 'text',
            search: false,
        },
    ];

    return (
        <PageContainer>
            <ProTable<HostComputerListItem, API.ListPagination>
                headerTitle="主机列表"
                actionRef={actionRef}
                rowKey="orderId"
                search={{
                    labelWidth: 90,
                    span: 7
                }}
                scroll={{x: true}}
                toolBarRender={() => [
                ]}
                request={hostComputerList}
                columns={columns}
                rowSelection={false}
                expandable={{
                    expandedRowRender: (record) =>
                        <div>
                        </div>,
                    rowExpandable: (record) => false,
                }}
                options={{
                    density: true,
                    fullScreen: true,
                    reload:true,
                    setting: false
                }}
            />
        </PageContainer>
    );
};

export default HostComputerList;
